<template>
  <div>
    <!-- <button @click="createCmd">增加</button>
    <button @click="removeCmd">删除</button>
    <button @click="updateCmd">修改</button>
    <button @click="getCmd">查询id单个</button>
    <button @click="getCmds">查询全部</button> -->
    <div class="container">
      <div class="pt-2 mb-3  fixed-top bg-white">
        <div class="container-fluid d-flex justify-content-end">
        <button class="btn btn-sm btn-primary ml-2" @click="setting">设置</button>
        </div>
      </div>
      <table class="table border table-sm">
        <thead class="table-primary">
          <tr>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="cmds.length > 0">
          <tr v-for="(item, index) in cmds" :key="index">
            <td>{{ item.title }}</td>
            <td>
              <div class="btn-group">
                <button class="btn btn-sm btn-primary" @click="run(item.path)">运行</button>
              </div>
            </td>
          </tr>
        </tbody>
        <div class="mt-5 mb-5 text-center" v-else>
          <p>暂无数据，请添加。</p>
        </div>
      </table>
    </div>
  </div>
</template>
<script>
import {
  runCmd,
  createCmd,
  removeCmd,
  updateCmd,
  getCmd,
  getCmds
} from "@/utils/cmd";
import { mapGetters } from "vuex";
import { windowCreate } from "@/utils/win";
// import { getCmds } from "@/api/cmd";


export default {
  name: "",
  data() {
    return {
      // todos: [],
      // todo: {
      //   title: "test11",
      //   user: "测试",
      //   completed: false,
      // },
      // cmds: [],
      search: {
        keyword: ""
      }
    };
  },
  created() {
    this.getCmds();
  },
  mounted() {},
  methods: {
    async createCmd() {
      await createCmd({
        title: "测试",
        path: "444"
      });
    },
    async removeCmd() {
      await removeCmd({
        id: "ada2b2ce-3d72-48b1-94ee-b29e48e0fe54"
      });
    },
    async updateCmd() {
      await updateCmd({
        id: "c792491a-e3b0-4cfc-86f9-f33237e62d74",
        title: "测试222666",
        path: "已修改555111"
      });
    },
    async getCmd() {
      let res = await getCmd({
        id: "c792491a-e3b0-4cfc-86f9-f33237e62d74"
      });
      console.log("res--", res);
    },
    async getCmds() {
      let res = await getCmds(
        {
          sortBy: "title",
          descending: true, //倒序
          size: 10,
          page: 1
        },
        { title: "测试" }
      );
      this.$store.dispatch('cmd/setCmds',res)
    },
    setting() {
      windowCreate({
        title: "管理页面",
        route: "#/setting",
        width: 1000,
        height: 750,
        backgroundColor: "#f9f9f9",
        resizable: true,
        modal: true,
        maximize: false
      });
    },
    run(path) {
      runCmd(path);
    }
  },
  computed: {
    ...mapGetters("cmd", ["cmds"])
  }
};
</script>
<style scoped lang="scss"></style>
